<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>Test Page</title>

     <style type="text/css">
        * { margin: 0; padding: 0;}
        #wrapper {
            width: 500px;
            margin: 20px auto;
        }
        .on {
            color: #d54e21;
            background: #eaf3fa url(arrow.png) no-repeat 3px 10px;
            }
        .active {
            background: #eaf3fa url(arrow.png) no-repeat 3px 10px;
        }
        p {
            margin: 10px 0px;padding: 5px;
            color: #363636;
        }
        
        h1 {
            font: 17px helvetica; color: #1C6280;
            padding: 5px 0px 5px 18px;
            border-top: 1px solid #dfdfdf;
            cursor: pointer;
            background: #eaf3fa;
            
        }


     </style>

     <script type="text/javascript" src="../../../../../../catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

     <script type="text/javascript">
        $(document).ready(function() {
            $('p').hide();
            $('h1:first').addClass('active');
            $('h1').click(function() {
                $('.active').removeClass('active');
                $('p').slideUp('normal');
                if($(this).next('p').is(':hidden') == true) {
                $(this).addClass('active');
                $(this).next('p').slideDown('normal');
                }
            });
            $('h1').hover(function(){//over
                $(this).addClass('on');
            },function() {//out
                $(this).removeClass('on');
            });
        });
     </script>
</head>

<body>
    <div id="wrapper">
        <h1>I am a freaking header</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 
        sit amet quam egestas semper. Aenean ultricies mi vitae est. Ut felis. Praesent dapibus, neque 
        id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat 
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
        <h1>I want to be a header</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 
        sit amet quam egestas semper. Aenean ultricies mi vitae est. Ut felis. Praesent dapibus, neque 
        id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat 
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
        <h1>Who does not want to be a header</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 
        sit amet quam egestas semper. Aenean ultricies mi vitae est. Ut felis. Praesent dapibus, neque 
        id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat 
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
        <h1>Screw ya'll headers</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 
        sit amet quam egestas semper. Aenean ultricies mi vitae est. Ut felis. Praesent dapibus, neque 
        id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat 
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
        <h1>Whatever header or not header</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 
        sit amet quam egestas semper. Aenean ultricies mi vitae est. Ut felis. Praesent dapibus, neque 
        id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat 
        volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>

</body>

</html>